<template>
  <view class="wrap">
    <!-- 表单 -->
    <view class="form">
      <uni-forms ref="valiForm" :modelValue="formData">
        <!-- 维修方式 -->
        <uni-forms-item label="维修方式" name="repairMethod" required labelWidth="200">
          <radio-group @change="onRepairMethodChange" style="padding-top: 8px;">
            <label>
              <radio value="store" :checked="formData.repairMethod === 'store'" /> 到店维修
            </label>
            <label>
              <radio value="pickup" :checked="formData.repairMethod === 'pickup'" style="margin-left: 5px;" /> 上门取车
            </label>
          </radio-group>
        </uni-forms-item>

        <!-- 客户信息 -->
        <uni-forms-item label="车主姓名" name="name" required labelWidth="300">
          <uni-easyinput v-model="formData.customerInfo.name" placeholder="请输入车主姓名" />
        </uni-forms-item>
        <uni-forms-item label="联系方式" name="phone" required labelWidth="300">
          <uni-easyinput v-model="formData.customerInfo.phone" placeholder="请输入联系方式" />
        </uni-forms-item>
        <uni-forms-item label="预约时间" name="time" required labelWidth="300">
          <picker mode="time" @change="onTimeChange">
            <view class="picker">{{ formData.customerInfo.time || '请选择时间' }}</view>
          </picker>
        </uni-forms-item>

        <!-- 取车位置（上门取车时显示） -->
        <uni-forms-item v-if="formData.repairMethod === 'pickup'" label="取车位置" name="pickupLocation" required labelWidth="300">
          <uni-easyinput v-model="formData.customerInfo.pickupLocation" placeholder="请输入取车位置" />
        </uni-forms-item>

        <!-- 车辆信息 -->
        <uni-forms-item label="车牌号" name="plateNumber" required labelWidth="300">
          <uni-easyinput v-model="formData.vehicleInfo.plateNumber" placeholder="请输入车牌号" />
        </uni-forms-item>
        <uni-forms-item label="车辆类型" name="type" required labelWidth="300">
          <uni-data-select v-model="formData.vehicleInfo.type" :localdata="vehicleTypes" placeholder="请选择车辆类型" />
        </uni-forms-item>
        <uni-forms-item label="整车照片" name="wholeCarPhoto">
          <uni-file-picker v-model="formData.vehicleInfo.wholeCarPhoto" fileMediatype="image" :image-styles="imageStyles"
            limit="1">
            <template #default>
              <view class="upload-container">
                <view class="upload-icon">
                  <text class="plus-icon">+</text>
                </view>
                <text class="upload-text">上传整车照片</text>
              </view>
            </template>
          </uni-file-picker>
        </uni-forms-item>
        <uni-forms-item label="维修部位照片" name="repairPhoto">
          <uni-file-picker v-model="formData.vehicleInfo.repairPhoto" fileMediatype="image" :image-styles="imageStyles"
            :limit="5" @success="handleUploadSuccess">
            <template #default>
              <view class="upload-container">
                <view class="upload-icon">
                  <text class="plus-icon">+</text>
                </view>
                <text class="upload-text">上传维修部位照片（最多5张）</text>
              </view>
            </template>
          </uni-file-picker>
        </uni-forms-item>
      </uni-forms>

      <!-- 提交按钮 -->
      <button type="primary" @click="onSubmit">提交</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
const formData = reactive({
  repairMethod: 'store', // 维修方式
  customerInfo: {
    name: '', // 车主姓名
    phone: '', // 联系方式
    time: '', // 预约时间
    pickupLocation: '', // 取车位置
  },
  vehicleInfo: {
    plateNumber: '', // 车牌号
    type: '', // 车辆类型
    wholeCarPhoto: '', // 整车照片
    repairPhoto: [], // 维修部位照片（数组）
  },
});

// 车辆类型选项
const vehicleTypes = reactive([
  { value: 'car', text: '轿车' },
  { value: 'suv', text: 'SUV' },
  { value: 'truck', text: '货车' },
  { value: 'motorcycle', text: '摩托车' },
]);

// 维修方式选择
const onRepairMethodChange = (e) => {
  formData.repairMethod = e.detail.value;
};

// 预约时间选择
const onTimeChange = (e) => {
  formData.customerInfo.time = e.detail.value;
};

// 图片上传样式
const imageStyles = {
  width: 150,
  height: 150,
  border: {
    style: 'dashed',
    radius: '2px',
  },
};

// 上传成功回调
const handleUploadSuccess = (res) => {
  console.log('上传成功', res);
  formData.vehicleInfo.repairPhoto = res.tempFilePaths; // 更新维修部位照片数组
};

// 提交表单
const onSubmit = () => {
  console.log('提交信息：', formData);
  uni.showToast({
    title: '提交成功',
    icon: 'success',
  });
  uni.navigateTo({
    url: '/pages/repair/yuyueSuccess/yuyueSuccess',
  });
};
</script>

<style scoped>
.wrap {
  padding: 20px;
  background-color: #fff;
}

.time {
  font-size: 18px;
  font-weight: bold;
}

.reserve-button {
  font-size: 14px;
}

.form {
  width: 80vw;
  margin-left: 4vw;
}

.upload-container {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
}

.upload-icon {
  margin-bottom: 10px;
}

.plus-icon {
  font-size: 32px;
  color: #666;
}

.upload-text {
  font-size: 14px;
  color: #666;
}
</style>